<template>
	<div class="box">
		<!-- 头部搜索模块 -->
		<headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :goSearchFc="searchClick" :addFun="addDrawerForm" />
		<!-- 中间表格模块 -->
		<el-tabs v-model="activeName" @tab-click="handleAcitveClick" type="border-card" style="box-shadow:none;border:none">
			<el-tab-pane label="国际" name="first">
				<BaseTable
					:data="cargotableData"
					:columns="cargotableDataColumns"
					:tableHeight="tableHeight"
					:pagination="false"
					:loading="loading"
				></BaseTable>
			</el-tab-pane>
			<el-tab-pane label="国内" name="second">
				<BaseTable
					:data="cargotableData1"
					:columns="cargotableDataColumns1"
					:tableHeight="tableHeight"
					:pagination="false"
					:loading="loading"
				></BaseTable>
			</el-tab-pane>
		</el-tabs>

		<div class="page">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryAll.startpage"
				:page-sizes="[10, 15, 20, 25, 30]"
				:page-size="queryAll.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
			></el-pagination>
		</div>

		<!-- 国际新增编辑 -->
		<el-drawer
			:before-close="handleClose"
			:title="flagOut ? '新增国际港口信息' : '修改国际港口信息'"
			:visible.sync="drawerOut"
			direction="rtl"
			size="30%"
		>
			<el-form :model="outForm" size="small" :rules="portRules" ref="outRefs" label-width="100px" style="padding:10px 20px">
				<el-form-item label="港口名称：" prop="portName">
					<el-input v-model="outForm.portName" @change="sjmCreated(outForm.portName)"></el-input>
				</el-form-item>
				<el-form-item label="港口代码：" prop="portCode">
					<el-input v-model="outForm.portCode"></el-input>
				</el-form-item>

				<el-form-item label="国籍：" prop="nationCode">
					<el-select style="width:100%" v-model="outForm.nationCode" placeholder="请选择" filterable>
						<el-option
							v-for="item in nationData"
							:key="item.dictValue"
							:label="item.dictLabel"
							:value="item.dictValue"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序号：" prop="sortNum">
					<el-input v-model="outForm.sortNum" type="number" min="0"></el-input>
				</el-form-item>
			</el-form>
			<div class="demo-drawer__footer">
				<el-button type="primary" @click="submitOut()" size="mini" :loading="outLoading">
					{{ outLoading ? "提交中 ..." : "保 存" }}
				</el-button>
			</div>
		</el-drawer>

		<!-- 国内新增编辑 -->
		<el-drawer
			:before-close="handleClose"
			:title="flagIneer ? '新增国内港口信息' : '修改国内港口信息'"
			:visible.sync="drawerInner"
			direction="rtl"
			size="30%"
		>
			<el-form :model="innerForm" size="small" :rules="portRules" ref="innerRefs" label-width="100px" style="padding:10px 20px">
				<el-form-item label="港口名称：" prop="portName">
					<el-input v-model="innerForm.portName" @change="sjmCreated1(innerForm.portName)"></el-input>
				</el-form-item>
				<el-form-item label="港口代码：" prop="portCode">
					<el-input v-model="innerForm.portCode"></el-input>
				</el-form-item>

				<el-form-item label="国籍：" prop="nationCode">
					<el-select style="width:100%" v-model="innerForm.nationCode" placeholder="请选择" disabled>
						<el-option
							v-for="item in nationData"
							:key="item.dictValue"
							:label="item.dictLabel"
							:value="item.dictValue"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属省份">
					<el-select
						style="width:100%"
						filterable
						clearable
						v-model="innerForm.provinceCode"
						placeholder="所属省份"
						@change="getcityData(innerForm.provinceCode)"
					>
						<el-option v-for="item in provinceData" :key="item.dm" :label="item.mc" :value="item.dm"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属城市">
					<el-select filterable clearable v-model="innerForm.cityCode" placeholder="所属城市" style="width:100%">
						<el-option v-for="item in cityData" :key="item.dm" :label="item.mc" :value="item.dm"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="内河沿海">
					<el-select filterable clearable v-model="innerForm.portClass" placeholder="内河沿海" style="width:100%">
						<el-option
							v-for="(item, index) in portClassData"
							:key="index"
							:label="item.dictLabel"
							:value="item.dictValue"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="排序号：" prop="sortNum">
					<el-input v-model="innerForm.sortNum" type="number" min="0"></el-input>
				</el-form-item>
			</el-form>
			<div class="demo-drawer__footer">
				<el-button type="primary" @click="submitInner()" size="mini" :loading="ineerLoading">
					{{ ineerLoading ? "提交中 ..." : "保 存" }}
				</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import Utils from '@/libs/Utils.js'
import BaseTable from '@/components/BaseTable'
import api from '@/api/Basic/portInfo'
import headerSearch from './component/headerSearch'
export default {
  name: 'portInfo',
  components: {
    BaseTable,
    headerSearch
  },
  data() {
    return {
      menuFlag: false,
      oldOut: {},
      oldInner: {},
      outLoading: false,
      ineerLoading: false,
      // 搜索框显示对象
      selectObject: [
        {
          name: '港口名称',
          type: 'input',
          modelName: 'portName'
        }
      ],
      cargotableDataColumns: [
        { prop: 'portName', label: '港口名称' },
        { prop: 'portCode', label: '港口代码' },
        { prop: 'nationName', label: '国籍' },
        { prop: 'sortNum', label: '排序号', sortable: true },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 250,
          render: (h, params) => {
            return h(
              'div',

              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML:
											"<span style='color:#0B6CD6' v-hasPermi='[metaDataManagement:mtport:update1]'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>"
                  },
                  on: {
                    click: () => {
                      this.handleEditOut(params.row)
                    }
                  }
                }),

                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      cargotableDataColumns1: [
        { prop: 'portName', label: '港口名称' },
        { prop: 'portCode', label: '港口代码' },
        { prop: 'nationName', label: '国籍' },
        { prop: 'provinceName', label: '所属省' },
        { prop: 'cityName', label: '所属市' },
        { prop: 'sortNum', label: '排序号', sortable: true },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 250,
          render: (h, params) => {
            return h(
              'div',

              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML:
											`<span style='color:#409eff' v-hasPermi="['metaDataManagement:mtport:update1']"><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleEditInner(params.row)
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      cargotableData: [],
      cargotableData1: [],
      activeName: 'first',
      loading: false,
      queryAll: {
        startpage: 1,
        pagesize: 10,
        portName: '',
        logogram: ''
      },
      totalNum: 0,
      drawerOut: false,
      flagOut: true,
      outForm: {
        portName: '',
        portCode: '',
        logogram: '',
        nationCode: '',
        sortNum: ''
      },
      portRules: {
        portName: [
          {
            required: true,
            message: '请输入港口名称',
            trigger: 'blur'
          }
        ],
        portCode: [
          {
            required: true,
            message: '请输入港口代码',
            trigger: 'blur'
          }
        ],
        nationCode: [
          {
            required: true,
            message: '请选择国籍',
            trigger: 'change'
          }
        ],
        sortNum: [
          {
            required: true,
            message: '请输入排序号',
            trigger: 'blur'
          }
        ]
      },
      nationData: [], // 船籍
      flagIneer: true,
      drawerInner: false,
      innerForm: {
        portName: '',
        portCode: '',
        logogram: '',
        nationCode: 'CN',
        provinceCode: '',
        cityCode: '',
        sortNum: '',
        portClass: ''
      },
      portClassData: [],
      provinceData: [],
      cityData: []
    }
  },
  async activated() {
    this.getNationData()
    this.getprovinceData()
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 40
    }
  },
  methods: {
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData)
      if (this.activeName === 'first') {
        this.getOutList()
      } else {
        this.getInnerList()
      }
    },
    handleAcitveClick(tab) {
      const activeName = tab.label

      if (activeName === '国际') {
        this.queryAll.startpage = 1
        this.queryAll.pagesize = 10

        this.getOutList()
      } else if (activeName === '国内') {
        this.queryAll.startpage = 1
        this.queryAll.pagesize = 10
        this.getInnerList()
      }
    },
    // 国际数据
    async getOutList() {
      this.loading = true
      await api
        .reqGetInternational(this.queryAll)
        .then(res => {
          this.loading = false
          this.cargotableData = res.data.data.pages
          this.queryAll.startpage = res.data.data.pageNum
          this.queryAll.pagesize = res.data.data.pageSize
          this.totalNum = res.data.data.totalNum
        })
        .catch(() => {})
    },
    // 国际保存新增
    submitOut() {
      this.$refs.outRefs.validate(valid => {
        if (valid) {
          this.outLoading = true
          if (this.flagOut) {
            this.outAddOut()
          } else {
            this.outEditOut()
          }
        } else {
          return false
        }
      })
    },
    // 国际保存
    async outAddOut() {
      this.nationData.forEach(v => {
        if (v.dictValue === this.outForm.nationCode) {
          this.outForm.nationName = v.dictLabel
        }
      })
      this.outForm.isDomestic = 'N'
      await api
        .reqSaveInternational(this.outForm)
        .then(res => {
          this.outLoading = false
          this.$message.success(res.data.msg)
          this.getOutList()
          this.drawerOut = false
        })
        .catch(() => {
          this.outLoading = false
        })
    },
    // 国际编辑
    async outEditOut() {
      this.nationData.forEach(v => {
        if (v.dictValue === this.outForm.nationCode) {
          this.outForm.nationName = v.dictLabel
        }
      })
      await api
        .reqEditInternational(this.outForm)
        .then(res => {
          this.outLoading = false
          this.$message.success(res.data.msg)
          this.getOutList()
          this.drawerOut = false
        })
        .catch(() => {
          this.outLoading = false
        })
    },
    // 国内数据
    async getInnerList() {
      this.loading = true
      await api
        .reqGetInner(this.queryAll)
        .then(res => {
          this.loading = false
          this.cargotableData1 = res.data.data.pages
          this.queryAll.startpage = res.data.data.pageNum
          this.queryAll.pagesize = res.data.data.pageSize
          this.totalNum = res.data.data.totalNum
        })
        .catch(() => {})
    },
    // 国内保存编辑
    submitInner() {
      this.$refs.innerRefs.validate(valid => {
        if (valid) {
          this.nationData.forEach(v => {
            if (v.dictValue === this.innerForm.nationCode) {
              this.innerForm.nationName = v.dictLabel
            }
          })
          // 省份
          if (this.innerForm.provinceCode) {
            this.provinceData.forEach(v => {
              if (v.dm === this.innerForm.provinceCode) {
                this.innerForm.provinceName = v.mc
              }
            })
          } else {
            this.innerForm.provinceName = ''
          }
          // 城市
          if (this.innerForm.cityCode) {
            this.cityData.forEach(v => {
              if (v.dm === this.innerForm.cityCode) {
                this.innerForm.cityName = v.mc
              }
            })
          } else {
            this.innerForm.cityName = ''
          }
          this.ineerLoading = true
          if (this.flagIneer) {
            this.addIneer()
          } else {
            this.efitInner()
          }
        } else {
          return false
        }
      })
    },
    // 国内保存
    async addIneer() {
      this.innerForm.isDomestic = 'Y'
      await api
        .reqSaveInternational(this.innerForm)
        .then(res => {
          this.ineerLoading = false
          this.$message.success(res.data.msg)
          this.getInnerList()
          this.drawerInner = false
        })
        .catch(() => {
          this.ineerLoading = false
        })
    },
    // 国内编辑
    async efitInner() {
      await api
        .reqEditInner(this.innerForm)
        .then(res => {
          this.ineerLoading = false
          this.$message.success(res.data.msg)
          this.getInnerList()
          this.drawerInner = false
        })
        .catch(() => {
          this.ineerLoading = false
        })
    },
    addDrawerForm() {
      if (this.activeName === 'first') {
        this.drawerOut = true
        this.flagOut = true

        this.$nextTick(() => {
          this.outForm = {
            portName: '',
            portCode: '',
            logogram: '',
            nationCode: '',
            nationName: '',
            sortNum: ''
          }
          this.oldOut = JSON.parse(JSON.stringify(this.outForm))
          this.$refs.outRefs.resetFields()
        })
      } else {
        this.drawerInner = true
        this.flagIneer = true

        this.$nextTick(() => {
          this.innerForm = {
            portName: '',
            portCode: '',
            logogram: '',
            nationCode: 'CN',
            provinceCode: '',
            cityCode: '',
            sortNum: '',
            portClass: ''
          }
          this.oldInner = JSON.parse(JSON.stringify(this.innerForm))
          this.$refs.innerRefs.resetFields()
        })
      }
    },
    handleEditOut(row) {
      this.drawerOut = true
      this.flagOut = false

      this.outForm = {
        id: row.id,
        portName: row.portName,
        portCode: row.portCode,
        logogram: row.logogram,
        nationCode: row.nationCode,
        nationName: row.nationName,
        sortNum: row.sortNum
      }
      this.oldOut = JSON.parse(JSON.stringify(this.outForm))
    },
    async handleDelete(id) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.reqDelete(id).then(res => {
          if (res.data.code === '0000') {
            if (this.activeName === 'first') {
              this.getOutList()
            } else {
              this.getInnerList()
            }
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleEditInner(row) {
      this.drawerInner = true
      this.flagIneer = false
      this.innerForm = {
        id: row.id,
        portName: row.portName,
        portCode: row.portCode,
        logogram: row.logogram,
        nationCode: row.nationCode,
        nationName: row.nationName,
        provinceCode: row.provinceCode,
        provinceName: row.provinceName,
        cityCode: row.cityCode,
        cityName: row.cityName,
        sortNum: row.sortNum,
        portClass: row.portClass ? this.portClassData.filter(item => item.dictLabel === row.portClass)[0].dictValue : ''
      }
      this.oldInner = JSON.parse(JSON.stringify(this.innerForm))

      this.getCityData(row.provinceCode)
    },
    handleSizeChange(val) {
      this.queryAll.pagesize = val
      switch (this.activeName) {
        case 'first':
          this.getOutList()
          break
        case 'second':
          this.getInnerList()
          break
      }
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      switch (this.activeName) {
        case 'first':
          this.getOutList()
          break
        case 'second':
          this.getInnerList()
          break
      }
    },
    // 获取国籍
    async getNationData() {
      const res = await api.reqGetNationData()
      this.nationData = res.data.data.NATIONALITY
    },
    // 所属省份
    async getprovinceData() {
      const res = await api.reqGetProvinceData()
      this.provinceData = res.data.data
      this.getcityData(this.innerForm.provinceCode)
    },
    // 所属城市
    async getcityData(data) {
      this.innerForm.cityCode = ''
      this.getCityData(data)
    },
    async getCityData(data) {
      const res = await api.reqGetCityData(data)
      this.cityData = res.data.data
    },
    handleClose(done) {
      let oldV = {}
      let newV = {}
      if (this.drawerOut) {
        oldV = this.oldOut
        newV = this.outForm
      }
      if (this.drawerInner) {
        oldV = this.oldInner
        newV = this.innerForm
      }
      if (!Utils.compareData(oldV, newV)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      } else {
        done()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.selectBox {
	justify-content: space-between;
	display: flex;
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-bottom: 0;
	border-left: none;
	height: 50px;
	position: relative;
	align-items: center;
	padding-left: 14px;
	padding-right: 20px;
}
.input_box {
	display: flex;
}
.page {
	background: #ffffff;
	text-align: right;
	border-radius: 0 0 4px 4px;
	padding: 5px 20px;
}
/deep/.el-tabs--border-card > .el-tabs__content {
	padding: 0 !important;
}
//抽屉底部样式
/deep/ .el-drawer__header {
	margin-bottom: 0;
	padding: 16px;
	border-bottom: 1px solid gainsboro;
}
.demo-drawer__footer {
	text-align: right;
	padding-right: 20px;
	border-top: 1px solid #c8cfde;
	background-color: #f5f7fa;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 50px;
}
.box {
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-radius: 4px 4px 0 0;
	border-top: none;
}
</style>
